<template>
  <el-row>
    <h4 style="margin-bottom: 0">说明文档</h4>
    <el-col v-if="showApi" :span="18" style="text-align: center">
      <pdf :src="src"
           :page="currentPage"
           @num-pages="pageCount = $event"
           @page-loaded="currentPage = $event"></pdf>
      <el-button v-if="currentPage>1" @click="currentPage--">上一页</el-button>
      {{ currentPage }} / {{ pageCount }}
      <el-button v-if="currentPage<pageCount" @click="currentPage++">下一页</el-button>
    </el-col>
    <el-col v-else>
      <span class="api-text">未发现说明文档，请先上传文档</span>
      <el-button size="mini" type="primary" @click="showResourceUploadApi=true">添加文档</el-button>
    </el-col>

    <!--  上传文档窗口  -->
    <vxe-modal title="说明文档上传"
               v-model="showResourceUploadApi"
               width="430"
               height="380">
      <template>
        <el-row type="flex" justify="center">
          <el-col style="text-align: center">
            <el-upload
                accept=".pdf"
                :file-list="fileList"
                :on-change="handleChange"
                drag
                action="#"
                :auto-upload="false"
                multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传pdf文件，且不超过 5 Mb</div>
            </el-upload>
            <el-button size="mini" type="primary" style="margin-top: 20px" @click="uploadApi">确认上传</el-button>
          </el-col>
        </el-row>
      </template>
    </vxe-modal>


    <black-mask :is-show.sync="showBlackMask">
      <template>
        <el-progress type="circle"
                     :percentage="uploadPrecent"
                     :stroke-width="10"
                     class="upload-el-progress"></el-progress>
        <p class="upload-text">文件上传中...</p>
      </template>
    </black-mask>
  </el-row>
</template>

<script>
/**
 * {帮助文档}
 *
 * @author: 宋康
 * @date: 2023/2/14
 */
import pdf from 'vue-pdf'
import {uploadResourceApi, queryResourceApi} from '@/api/resources-center/service'

export default {
  name: "ResourceApi",
  components: {pdf},
  props: {
    rid: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      showApi: false,
      showResourceUploadApi: false,
      fileList: [],
      showBlackMask: false,
      uploadPrecent: 0,
      resourceId: '',
      src: '',
      currentPage: 1,
      pageCount: 0,
    }
  },
  methods: {
    /**
     * {获取API}
     *
     * @author: 宋康
     * @date: 2023/2/14
     */
    getApi() {
      if ('' !== this.resourceId) {
        this._debounceT("0BKVz9cE", () => queryResourceApi(this.resourceId).then(res => {
          if (res.status) {
            if (res.data.resourceId) {
              this.src = this.imgUrl + res.data.apiUrl;
              this.showApi = true;
            }
          }
        }), 500)
      }
    },
    /**
     * {上传文档改变时触发}
     *
     * @author: 宋康
     * @date: 2023/2/14
     */
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    /**
     * {上传文档}
     * raw
     * @author: 宋康
     * @date: 2023/2/14
     */
    uploadApi() {
      if (this.fileList.length === 0) {
        this.$message.error("未添加上传文档");
        return;
      }
      const maxSize = 1024 * 1024 * 5;
      const file = this.fileList[0];
      if ('.pdf' !== file.name.substr(file.name.length - 4)) {
        this.$message.error("上传文件类型错误");
        return;
      }
      if (file.size > maxSize) {
        this.$message.error("上传文件过大");
        return;
      }
      let formData = new FormData();
      formData.append('resourceId', this.resourceId);
      formData.append('file', file.raw);
      this.showBlackMask = true;
      this._debounceT("M3KvzVLa", () => uploadResourceApi(formData, (e) => {
        const {loaded, total} = e;
        this.uploadPrecent = ((loaded / total) * 100) | 0;
      }).then(res => {
        // 关闭上传进度条
        this.showBlackMask = false;
        this.showResourceUploadApi = false;
        if (res.status) {
          this.$message.success("上传完成");
          this.getApi();
        } else {
          this.$message.error(res.msg);
        }
      }), 500);
    }
  },
  mounted() {
    this.resourceId = this.rid;
    this.getApi();
  },
  watch: {
    rid(n) {
      this.resourceId = n;
      this.getApi();
    }
  }
}
</script>

<style lang="scss" scoped>
.api-text {
  font-size: 14px;
  color: #8a8b8c;
  margin-right: 10px;
}
</style>